<template>
  <div>

    <!-- 搜索栏 -->
    <div>
      <input type="text" v-model="searchId" placeholder="搜索编号..." @input="filterSensors">
    </div>

    <!-- 表单显示传感器数据 -->
    <div class="monitoring-container">
      <div class="monitoring-item" v-for="sensor in filteredSensors" :key="sensor.id">
        <div>
          <p>编号: {{ sensor.id }}</p>
          <p>地点: {{ sensor.location }}</p>
          <p>温度: {{ sensor.temperature }}</p>
          <p>严重程度: {{ sensor.severity }}</p>
          <p>时间: {{ sensor.timestamp }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Topbar from "@/components/Topbar.vue";
import Monitoringbar from "@/components/Monitoringbar.vue";
import axios from 'axios';

export default {
  name: "role1Monfive",
  components: { Topbar, Monitoringbar },
  data() {
    return {
      sensors: [], // 存储传感器数据
      searchId: '', // 搜索栏输入的编号
      filteredSensors: [], // 过滤后的传感器数据
    };
  },
  mounted() {
    this.fetchSensors(); // 页面加载时获取传感器数据
  },
  methods: {
    fetchSensors() {
      axios.post('http://localhost:8090/sensor/get')
        .then(response => {
          this.sensors = response.data;
          this.filteredSensors = response.data; // 初始化过滤数据
        })
        .catch(error => {
          console.error(error);
        });
    },
    filterSensors() {
      if (this.searchId) {
        this.filteredSensors = this.sensors.filter(sensor => sensor.id.includes(this.searchId));
      } else {
        this.filteredSensors = this.sensors; // 如果搜索栏为空，显示所有数据
      }
    }
  }
};
</script>

<style scoped>
/* 样式部分保持不变 */
</style>
